<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="contentsize">房间信息</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :model="form" label-width="auto" :inline="true" size="mini">
                    <el-form-item label="项目:">
                        <el-select v-model="form.projectId" placeholder="请选择项目" @change="onSearch">
                            <el-option v-for="item in xmxxlist" :key="item.projectId" :label="item.projectName" :value="item.projectId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="行政区名称:">
                        <div style="width:170px">
                            <el-select v-model="form.districtName" placeholder="请选择行政区名称" clearable @change="onSearch">
                                <el-option v-for="item in qslist" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" icon="el-icon-search" class="searchcolor">查询</el-button>
                        <!-- <el-button @click="reSearch" icon="el-icon-refresh" class="searchcolor">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
            <!--  background-color: #e4f4f5; -->
            <div
                style="
                    font-size: 14px;
                    padding: 10px;
                    background-color: #e7f7f8;
                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
                        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
                "
            >
                <el-form ref="tjform" :model="tjform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="开始时间:">
                        <div style="width: 190px">
                            <el-date-picker
                                type="date"
                                placeholder="选择开始时间"
                                v-model="tjform.beginDate"
                                style="width: 100%"
                                value-format="yyyy-MM-dd"
                                :clearable="false"
                            ></el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="结束时间:">
                        <div style="width: 190px">
                            <el-date-picker
                                type="date"
                                placeholder="选择结束时间"
                                v-model="tjform.endDate"
                                style="width: 100%"
                                value-format="yyyy-MM-dd"
                                :clearable="false"
                            ></el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="tjonSearch" icon="el-icon-search" class="searchcolor">查询</el-button>
                    </el-form-item>
                </el-form>
                <!-- <span style="margin-right: 10px" v-if="xmxxdetail.projectCount">
                    入驻项目数量:<span style="color: #008a94">{{ xmxxdetail.projectCount }}</span>
                </span>
                <span style="margin-right: 10px" v-if="xmxxdetail.housingCount"
                    >房屋数量:<span style="color: #008a94">{{ xmxxdetail.housingCount }}</span></span
                >
                <span style="margin-right: 10px" v-if="xmxxdetail.transactionAmount"
                    >交易金额:<span style="color: #008a94">{{ xmxxdetail.transactionAmount }}</span></span
                >
                <span style="margin-right: 10px" v-if="xmxxdetail.housingEmptyRate"
                    >房屋空置率:<span style="color: #008a94">{{ xmxxdetail.housingEmptyRate }}</span></span
                >
                <span v-if="xmxxdetail.housingSignRate"
                    >房屋签约率:<span style="color: #008a94">{{ xmxxdetail.housingSignRate }}</span></span
                > -->
                <!-- <div style="width: 100%; display: flex;">
                    <div class="tjnum" style="border-left: 4px solid rgb(140, 191, 207)">
                        <div style="margin-bottom: 10px;">入驻项目数量</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.projectCount }}</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(140, 191, 207)">
                        <div style="margin-bottom: 10px;">房屋数量</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.housingCount }}</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(81, 211, 81)">
                        <div style="margin-bottom: 10px;">交易金额</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.transactionAmount }}</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(255, 123, 140)">
                        <div style="margin-bottom: 10px;">房屋空置率</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.housingEmptyRate }}%</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(255, 123, 140)">
                        <div style="margin-bottom: 10px;">房屋签约率</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.housingSignRate }}%</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(255, 123, 140)">
                        <div style="margin-bottom: 10px;">应收租金</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.housingSignRate }}%</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(255, 123, 140)">
                        <div style="margin-bottom: 10px;">已收租金</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700; ">{{ xmxxdetail.housingSignRate }}%</span>
                        </div>
                    </div>
                    <div class="tjnum" style="border-left: 4px solid rgb(255, 123, 140)">
                        <div style="margin-bottom: 10px;">欠收租金</div>
                        <div>
                            <span style="font-size: 28px; font-weight: 700;">{{ xmxxdetail.housingSignRate }}%</span>
                        </div>
                    </div>
                </div> -->
                <div>
                    <el-row :gutter="20">
                        <el-col :span="3">
                            <div>
                                <el-statistic title="入驻项目数量" v-bind:class="{ titleColor: 'red' }">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px">{{
                                            xmxxdetail.projectCount ? xmxxdetail.projectCount : 0
                                        }}</span>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="房屋数量">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px"
                                            >{{ xmxxdetail.housingCount ? xmxxdetail.housingCount : 0 }}
                                        </span>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="交易金额">
                                    <template slot="formatter">
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="xmxxdetail.transactionAmount ? xmxxdetail.transactionAmount : 0"
                                            placement="top"
                                        >
                                            <span
                                                style="
                                                    font-weight: 700;
                                                    font-size: 28px;
                                                    max-width: 132px;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                "
                                            >
                                                {{ xmxxdetail.transactionAmount?xmxxdetail.transactionAmount:0 }}
                                            </span>
                                        </el-tooltip>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="房屋空置率">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px"
                                            >{{ xmxxdetail.housingEmptyRate ? xmxxdetail.housingEmptyRate : 0 }}%</span
                                        >
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="房屋签约率">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px"
                                            >{{ xmxxdetail.housingSignRate ? xmxxdetail.housingSignRate : 0 }}%</span
                                        >
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="应收租金">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px">{{
                                            xmxxdetail.receivableAmount ? xmxxdetail.receivableAmount : 0
                                        }}</span>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="已收租金">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px">{{
                                            xmxxdetail.receivedAmount ? xmxxdetail.receivedAmount : 0
                                        }}</span>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div>
                                <el-statistic title="欠收租金">
                                    <template slot="formatter">
                                        <span style="font-weight: 700; font-size: 28px">{{
                                            xmxxdetail.arrearsAmount ? xmxxdetail.arrearsAmount : 0
                                        }}</span>
                                    </template>
                                </el-statistic>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <el-table
                :data="tableData"
                style="width: 100%; margin-top: 10px"
                :header-cell-style="tableHeaderColor"
                :row-style="tablerowColor"
                :row-class-name="tableRowClassName"
                :cell-style="tablecellColor"
                border
                max-height="380"
            >
                <el-table-column prop="projectName" label="项目名称" align="center" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="colData[0].istrue" prop="cityName" label="城市名称" align="center"> </el-table-column>
                <el-table-column v-if="colData[1].istrue" prop="districtName" label="行政区名称" align="center" width="100">
                </el-table-column>
                <el-table-column v-if="colData[2].istrue" prop="streetName" label="街道名称" align="center"> </el-table-column>
                <el-table-column v-if="colData[3].istrue" prop="communityName" label="楼盘名称" align="center"> </el-table-column>
                <el-table-column v-if="colData[4].istrue" prop="buildingName" label="楼栋名称" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="colData[5].istrue" prop="unitName" label="单元名称" align="center"> </el-table-column>
                <el-table-column v-if="colData[6].istrue" prop="floor" label="楼层" align="center"> </el-table-column>
                <el-table-column v-if="colData[7].istrue" prop="roomNumber" label="门牌" align="center"> </el-table-column>
                <el-table-column
                    v-if="colData[8].istrue"
                    prop="roomAddress"
                    label="地址"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="200"
                >
                </el-table-column>
                <el-table-column v-if="colData[9].istrue" prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.status == -1 ? '驳回' : scope.row.status == 0 ? '待审核' : '通过' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[10].istrue" prop="bpmStatus" label="流程状态" align="center"> </el-table-column>
                <el-table-column v-if="colData[11].istrue" prop="houseType" label="户型" align="center"> </el-table-column>
                <el-table-column v-if="colData[12].istrue" prop="roomCode" label="房源编号" align="center"> </el-table-column>
                <el-table-column v-if="colData[13].istrue" prop="roomArea" label="面积" align="center"> </el-table-column>
                <el-table-column v-if="colData[14].istrue" prop="roomPrice" label="价格" align="center"> </el-table-column>
                <el-table-column v-if="colData[15].istrue" prop="roomVersion" label="房间描述" align="center"> </el-table-column>
                <el-table-column v-if="colData[16].istrue" prop="roomTag" label="房间标签" align="center"> </el-table-column>
                <el-table-column v-if="colData[17].istrue" prop="housingRenovation" label="装修类型" align="center"> </el-table-column>
                <el-table-column v-if="colData[18].istrue" prop="saleStatus" label="收放盘状态" align="center" width="100">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.saleStatus == 0 ? '收盘' : '放盘' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[19].istrue" prop="isViewHoliday" label="是否假期看房" align="center" width="120">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.saleStatus == 0 ? '否' : '是' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[20].istrue" prop="houseNotes" label="房屋备注" align="center"> </el-table-column>
                <el-table-column v-if="colData[21].istrue" prop="feeType" label="费用类型" align="center"> </el-table-column>
                <el-table-column v-if="colData[22].istrue" prop="rentPrice" label="出租价格" align="center"> </el-table-column>
                <el-table-column v-if="colData[23].istrue" prop="leaseTerm" label="房屋租期" align="center"> </el-table-column>
                <el-table-column v-if="colData[24].istrue" prop="unitPrice" label="单价" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template #header>
                        <div style="display: flex; justify-content: center">
                            <div>操作</div>
                            <div style="margin-left: 4px">
                                <el-popover title="筛选列" trigger="click" width="40">
                                    <el-checkbox-group v-model="checkedColumns" size="mini" :popperAppendToBody="false">
                                        <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
                                    </el-checkbox-group>
                                    <div title="筛选列" class="filter-table-col" slot="reference">
                                        <i class="el-icon-s-tools"></i>
                                    </div>
                                </el-popover>
                            </div>
                        </div>
                    </template>

                    <template slot-scope="scope">
                        <router-link :to="{ name: 'fjxxdetail', params: { data: JSON.stringify(scope.row) } }" style="padding-right: 12px">
                            <el-button type="text" size="small">查看</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination" style="float: right">
                <el-pagination
                    background
                    layout="total,prev, pager, next,jumper"
                    :total="total"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
import { xmxxList, xmxxSum, fjxxList } from '@/api/indexwb';
import valueList from '@/components/common/valueList.vue';
import axios from 'axios';
export default {
    name: 'dylist',
    data() {
        return {
            qslist: valueList.qslist,
            urlnow: 'http://125.39.179.246:8099/franchise-business-api.jfzh.com.cn',
            reload: null,
            xmxxlist: [],
            xmxxdetail: {
                projectCount: '',
                housingCount: '',
                transactionAmount: '',
                housingEmptyRate: '',
                housingSignRate: '',
                receivableAmount: '',
                receivedAmount: '',
                arrearsAmount: ''
            },
            tjform: {
                beginDate: '',
                endDate: '',
                projectId: ''
            },
            total: 0,
            current: 1,
            pageSize: 10,
            form: {
                projectId: ''
            },
            tableData: [],
            colData: [
                { title: '城市名称', istrue: false },
                { title: '行政区名称', istrue: true },
                { title: '街道名称', istrue: true },
                { title: '楼盘名称', istrue: true },
                { title: '楼栋名称', istrue: true },
                { title: '单元名称', istrue: true },
                { title: '楼层', istrue: true },
                { title: '门牌', istrue: true },
                { title: '地址', istrue: true },
                { title: '状态', istrue: true },
                { title: '流程状态', istrue: false },
                { title: '户型', istrue: false },
                { title: '房源编号', istrue: false },
                { title: '面积', istrue: false },
                { title: '价格', istrue: true },
                { title: '房间描述', istrue: false },
                { title: '房间标签', istrue: false },
                { title: '装修类型', istrue: false },
                { title: '收放盘状态', istrue: false },
                { title: '是否假期看房', istrue: false },
                { title: '房屋备注', istrue: false },
                { title: '费用类型', istrue: false },
                { title: '出租价格', istrue: true },
                { title: '房屋租期', istrue: true },
                { title: '单价', istrue: true }
            ],
            // 多选框的列表，列出表格的每一列
            checkBoxGroup: [
                '城市名称',
                '行政区名称',
                '街道名称',
                '楼栋名称',
                '单元名称',
                '楼层',
                '门牌',
                '地址',
                '状态',
                '流程状态',
                '户型',
                '房源编号',
                '面积',
                '价格',
                '房间描述',
                '房间标签',
                '装修类型',
                '收放盘状态',
                '是否假期看房',
                '房屋备注',
                '费用类型',
                '出租价格',
                '房屋租期',
                '单价'
            ],
            // 当前选中的多选框，代表当前展示的列
            checkedColumns: [
                '行政区名称',
                '街道名称',
                '楼栋名称',
                '单元名称',
                '楼层',
                '门牌',
                '地址',
                '状态',
                '价格',
                '出租价格',
                '房屋租期',
                '单价'
            ]
        };
    },
    components: {},
    computed: {},
    watch: {
        checkedColumns(val) {
            let arr = this.checkBoxGroup.filter((i) => !val.includes(i));
            this.colData.filter((i) => {
                if (arr.indexOf(i.title) != -1) {
                    i.istrue = false;
                } else {
                    i.istrue = true;
                }
            });
            this.reload = Math.random();
        }
    },

    methods: {
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background:linear-gradient(to bottom, #008A94,#0ae2f2) !important;color:#ffffff;font-size:14px;';
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;color:black';
        },
        tablecellColor() {
            return 'font-weight:700;color:#000000;border-color:#c0c0c0';
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 != 0) {
                return 'success-row'; //这是类名
            } else {
                return '';
            }
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.roomlist(this.form);
            console.log(val);
        },
        // 搜索
        onSearch() {
            // this.current = 1;
            // this.form.current = 1;
            this.tjform.projectId = this.form.projectId;
            this.fjxxList(this.form);
            this.xmxxSum(this.tjform);
            console.log('搜索');
        },
        tjonSearch() {
            this.xmxxSum(this.tjform);
        },
        // 重置
        reSearch() {
            this.current = 1;
            this.form = {
                buildid: '',
                cb: '',
                cqdw: '',
                create_name: '',
                create_name_id: '',
                create_time: '',
                cx: '',
                dabh: '',
                db: '',
                fj: '',
                fjh: '',
                fwdz: '',
                fwyt: '',
                fzrq: '',
                gr: '',
                hx: '',
                id: '',
                jizumj: '',
                jzmj: '',
                jzmja: '',
                jzmjb: '',
                lc: '',
                mh: '',
                mqb: '',
                note: '',
                pgjg: '',
                qs: '',
                qzlx: '',
                status_code: 0,
                tdsyqlx: '',
                tdsyqmj: '',
                update_name: '',
                update_name_id: '',
                update_time: '',
                wyf: '',
                yz: '',
                zlc: '',
                zlsb: '',
                zsbh: '',
                zssb: '',
                current: 1, //第几页
                pageSize: 10, //每页数量
                gfdw: this.$store.getters.gfdw
            };
            this.roomlist(this.form);
            console.log('搜索');
        },
        // 添加
        addnew() {
            this.$router.push({
                name: 'adddy',
                path: '/adddy'
            });
        },
        // 删除
        deleteClick(e) {
            console.log(e);
            this.$confirm('确定删除此条信息吗？')
                .then(() => {
                    let data = { id: e.id };
                    roomdelete(data).then((res) => {
                        if (res.code == 200) {
                            this.roomlist(this.form);
                            this.$message.success('删除成功');
                        }
                    });
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 项目列表
        async xmxxList() {
            // let res = await axios.get(this.urlnow+'/admin-api/lb/zx-api/project-list', {
            //     headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '*' }
            // });
            // console.log('data', res.data.data);
            // this.xmxxlist = res.data.data;
            // 本地操作方法
            await xmxxList().then((res) => {
                console.log(res);
                if (res.code == 0) {
                    this.xmxxlist = res.data;
                    this.form.projectId = this.xmxxlist[0].projectId;
                    this.tjform.projectId = this.xmxxlist[0].projectId;
                    this.fjxxList(this.form);
                    this.xmxxSum(this.tjform);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 项目详情
        async xmxxSum(data) {
            // let res = await axios.get(
            //     this.urlnow+'/admin-api/lb/zx-api/received-summary',
            //     {
            //         headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '*' },
            //         params: data
            //     }
            // );
            // console.log('data', res.data.data);
            // this.xmxxdetail = res.data.data;
            // 本地操作方法
            xmxxSum(data).then((res) => {
                console.log(res);
                if (res.code == 0) {
                    this.xmxxdetail = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 房间列表
        fjxxList(data) {
            // axios
            //     .get(this.urlnow+'/admin-api/lb/zx-api/room-list', {
            //         headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '*' },
            //         params: data
            //     })
            //     .then((res) => {
            //         console.log(res.data);
            //         this.tableData = res.data.data;
            //     });
            // 本地操作方法
            fjxxList(data).then((res) => {
                console.log(res);
                if (res.code == 0) {
                    this.tableData = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        geturl() {
            if (window.location.host.indexOf('192.168') > -1 || window.location.host.indexOf('localhost') > -1) {
                // this.urlnow='/other/franchise-business-api.jfzh.com.cn'
                this.urlnow = 'http://192.168.1.103:8099/franchise-business-api.jfzh.com.cn';
            } else {
                this.urlnow = 'http://125.39.179.246:8099/franchise-business-api.jfzh.com.cn';
            }
        },
        gettimeow() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1; // 月份从0开始，需要加1
            const monthl = now.getMonth(); // 月份从0开始，需要加1
            const day = now.getDate();
            this.tjform.beginDate = year + '-' + monthl + '-' + day;
            this.tjform.endDate = year + '-' + month + '-' + day;
        }
    },
    mounted() {
        // this.xmxxSum(this.tjform);
    },
    created() {
        this.gettimeow();
        this.xmxxList();
        // this.geturl();
    }
};
</script>
<style>
.el-statistic .head {
    color: #008a94; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
}
</style>
<style scoped>
.container {
    /* height: calc(100vh - 260px); */
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}

/* 新增按钮 */
.addcolor {
    margin-bottom: 10px;
}
</style>
<style>
.success-row {
    background-color: #eaf3fb !important;
}
.tjnum {
    width: 10%;
    height: 80px;
    margin-left: 4px;
    border-radius: 4px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #e6e2e2;
    box-shadow: 0 0 6px #d6d3d3;
    background-color: #ffffff;
}
.tjnum1 {
    width: 20%;
    height: 120px;
    margin-left: 4px;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
}
</style>
